<!--
  @description: 可展开的搜索栏组件
  @filePath:src\components\ExpandedSearchBox\index.vue
-->
<template>
    <div class="expanded-search-box">
        <div class="expanded-search_show_box">
            <lots-search-box
                v-bind="$attrs"
                ref="searchBoxRef"
                :class="[
                    isExpanded ? 'fewer' : 'expanded',
                    showCornerMark && 'cornerMark',
                ]"
                :fields="fields"
                :isShowAllFields="false"
                @search-change="handleSearchChange"
                @reset="handleSearchReset" />
            <div class="expanded-search-btn-box" ref="searchBtnBox">
                <lots-button @click="handleReset" :icon="ResetOutline">
                    重置
                </lots-button>
                <lots-button
                    :loading="loading"
                    @click="handleSearch"
                    type="primary"
                    :icon="Search">
                    查询
                </lots-button>
                <md-button
                    v-if="isShowExpandedBtn"
                    :class="['expanded-btn', showCornerMark && 'cornerMark']"
                    @click="handleExpanded"
                    type="text"
                    :icon="isExpanded ? ArrowUp : ArrowDown">
                    {{ isExpanded ? '收起' : '展开' }}
                </md-button>
            </div>
        </div>
        <Transition name="slide-fade">
            <div
                class="expanded-box"
                :style="{ width: expandedBoxWidth + 'px' }"
                v-show="isExpanded">
                <lots-search-box
                    v-bind="$attrs"
                    ref="expandedSearchBoxRef"
                    :fields="expandedFields" />
            </div>
        </Transition>
    </div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, defineExpose } from 'vue';
import { Search, ResetOutline, ArrowDown, ArrowUp } from '@mdesign3/icons-vue';
import { cloneDeep, debounce } from 'lodash-es';
const props = defineProps({
    fields: {
        type: Array,
        dfault: () => [],
    },
    isShowAllFields: {
        type: Boolean,
        dfault: false,
    },
    isShowExpandedBtn: {
        type: Boolean,
        dfault: false,
    },
    loading: {
        type: Boolean,
        dfault: false,
    },
});
const emit = defineEmits(['search-change']);

const searchBoxRef = ref<ElRef | null>(null);

const searchBtnBox = ref<ElRef | null>(null);

const expandedSearchBoxRef = ref<ElRef | null>(null);

const isExpanded = ref(false);

const expandedFields: Recordable = ref([]);

const showCornerMark = ref(false);

const expandedBoxWidth = ref<string | number>(0);

onActivated(() => {
    nextTick(() => {
        const t = 120;
        setTimeout(() => {
            resetExpandedBoxWidth();
        }, t);
    });
});
onMounted(() => {
    nextTick(() => {
        resetExpandedBoxWidth();
    });
    window.addEventListener('resize', resize);
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', resize);
});

const resize = debounce(() => {
    nextTick(() => {
        resetExpandedBoxWidth();
    });
}, 100);

const handleExpanded = () => {
    isExpanded.value = !isExpanded.value;
    nextTick(() => {
        resetExpandedBoxWidth();
    });
};

const handleSearch = () => {
    searchBoxRef.value.submitSearch();
};
const handleReset = () => {
    searchBoxRef.value.reset();
};

const handleSearchChange = (searchParams = {}) => {
    const expandedSearchData = cloneDeep(expandedSearchBoxRef.value.searchData);
    showCornerMark.value = false;
    for (const key in expandedSearchData) {
        if (Object.prototype.hasOwnProperty.call(expandedSearchData, key)) {
            const hasVal = !!expandedSearchData[key];
            !showCornerMark.value && hasVal && (showCornerMark.value = true);
        }
    }
    emit('search-change', { ...searchParams, ...expandedSearchData });
};

const handleSearchReset = () => {
    expandedSearchBoxRef.value?.setQueryParams({});
};

const setExpandedFields = (searchFields: Recordable[] | [] | undefined) => {
    const allFields = cloneDeep(searchFields);
    allFields &&
        (expandedFields.value = allFields.filter(
            (item: Recordable) => !item.isFixed && !props.isShowAllFields,
        ));
    expandedFields.value.forEach((item: Recordable) => {
        item.isFixed = true;
    });
};

const resetExpandedBoxWidth = () => {
    const dom: HTMLElement | null = document.querySelector(
        '.expanded-search-box .lots-search-box',
    );

    expandedBoxWidth.value = dom ? dom.offsetWidth : 0;
};

watch(
    () => props.fields,
    (newVal) => {
        setExpandedFields(newVal as Recordable[]);
    },
    {
        immediate: true,
        deep: true,
    },
);

const defineExposeObj = {
    searchData: () => nextTick(() => searchBoxRef.value.searchData),
    setQueryParams: (initialVal: Recordable) =>
        nextTick(() => searchBoxRef.value.setQueryParams(initialVal)),
    submitSearch: (isExport: boolean) =>
        nextTick(() => searchBoxRef.value.submitSearch(isExport)),
    searchBoxRef,
    expandedSearchBoxRef,
};

defineExpose(defineExposeObj);
</script>
<style lang="less" scoped>
.expanded-search-box {
    :deep(.lots-search-box) {
        .lots-advanced-search-box,
        .md-space .md-space__item:last-child {
            display: none !important;
        }
        .search-box .md-col .expanded-btn {
            display: inline-block;
            position: relative;
            top: 3px;
        }
        .search-box .md-col .expanded-btn::after {
            display: inline-block;
            font-size: 12px;
            margin-left: 2px;
            position: relative;
            top: 2px;
            color: #0077ff;
            cursor: pointer;
            padding-left: 16px;
        }
    }
    .expanded-btn {
        position: relative;
    }
    :deep(.cornerMark.expanded-btn)::before {
        content: ' ';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        right: -6px;
        top: -2px;
        z-index: 99;
    }
    .expanded-box :deep(.lots-search-box .search-box .md-col):last-child {
        display: none !important;
    }

    :deep(.md-row.search-box .md-col):last-child {
        display: none !important;
    }

    .expanded-search_show_box {
        display: flex;
        .expanded-search-btn-box {
            display: flex;
            flex: 1;
            padding-left: 30px;
            justify-content: flex-end;
        }
    }
}
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}
</style>
